<template>
  <div class="">
    <el-card class="data-item">
      <div slot="header" class="data-header">
        <span class="title">累计用户</span>
        <el-date-picker
          v-model="datetime1"
          class="el-data-picker"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="changDatetime1"
        />
      </div>
      <div id="line" class="data-box" />
    </el-card>
    <el-card class="data-item">
      <div slot="header" class="data-header">
        <span class="title">新增用户</span>
        <el-date-picker
          v-model="datetime2"
          class="el-data-picker"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="changDatetime2"
        />
      </div>
      <div id="bar1" class="data-box" />
    </el-card>
    <el-card class="data-item">
      <span slot="header" class="title">营业概况</span>
      <div class="business-box">
        <div class="business-item">
          <p class="p1">有效订单</p>
          <p class="p2"><span class="number">0</span>单</p>
          <p class="p3">昨日同时段0单</p>
        </div>
        <div class="business-item">
          <p class="p1">总成交额</p>
          <p class="p2"><span class="number">0</span>元</p>
          <p class="p3">昨日同时段0元</p>
        </div>
        <div class="business-item">
          <p class="p1">环比数据</p>
          <p class="p2"><span class="number">10%</span></p>
        </div>
        <div class="business-item">
          <p class="p1">项目点击量</p>
          <p class="p2"><span class="number">0</span>次</p>
          <p class="p3">昨日同时段0次</p>
        </div>
        <div class="business-item">
          <p class="p1">入驻店铺数量</p>
          <p class="p2"><span class="number">89</span>单</p>
          <p class="p3">本月新增数量13家</p>
        </div>
        <div class="business-item">
          <p class="p1">推广分享</p>
          <p class="p2"><span class="number">18</span>次</p>
          <p class="p3">上月数量3次</p>
        </div>
        <div class="business-item">
          <p class="p1">分享进入</p>
          <p class="p2"><span class="number">8</span>次</p>
          <p class="p3">上月数量3次</p>
        </div>
        <div class="business-item">
          <p class="p1">推广成功率</p>
          <p class="p2"><span class="number">17%</span></p>
          <p class="p3">上月66%</p>
        </div>
      </div>
    </el-card>
    <el-card class="data-item">
      <span slot="header" class="title">用户行为</span>
      <div class="data-container">
        <div class="data-left">
          <div class="data-search">
            <div class="data-select">
              推广考评：
              <el-select v-model="selectValue">
                <el-option value="0">一级部门</el-option>
                <el-option value="2">二级部门</el-option>
              </el-select>
            </div>
            <el-date-picker
              v-model="datetime3"
              class="el-data-picker"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="changDatetime3"
            />
          </div>
          <div id="bar2" class="data-box" />
        </div>
        <div class="data-right">
          <div class="data-select">
            推广排行：
            <el-date-picker
              v-model="datetime4"
              class="el-data-picker"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="changDatetime4"
            />
          </div>
          <div class="rank-box">
            <div v-for="(item,index) in rankList" :key="index" class="rank-item">
              <span class="rank" :class="index<3 ? 'on':''">{{ index + 1 }}</span>
              <span class="dept">部门{{ item }}</span>
              <span class="number">{{ item }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import dayjs from 'dayjs'
export default {
  name: 'DataCenter',
  data() {
    const defaultDate = [dayjs().startOf('month'), dayjs()]
    return {
      selectValue: '',
      datetime1: defaultDate,
      datetime2: defaultDate,
      datetime3: defaultDate,
      datetime4: defaultDate,
      rankList: [1, 2, 3, 4, 5, 6, 7],
      color: ['#409EFF', '#E65D6E', '#FEC171', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = dayjs()
            const start = dayjs().subtract(6, 'day')
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近十五天',
          onClick(picker) {
            const end = dayjs()
            const start = dayjs().subtract(14, 'day')
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = dayjs()
            const start = dayjs().subtract(1, 'month').add(1, 'day')
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = dayjs()
            const start = dayjs().subtract(3, 'month').add(1, 'day')
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  mounted() {
    this.getInitData()
  },
  methods: {
    getInitData() {
      const [startDate, endDate] = this.datetime1
      const dates = this.getDatesInRange(startDate, endDate)
      const values = [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234]
      const lineOptions = this.getLineOptions(dates, values)
      const bar1Options = this.getBar1Options(dates, values)
      const bar2Options = this.getBar2Options(dates, values)
      this.initLineEcharts(lineOptions)
      this.initBar1Echarts(bar1Options)
      this.initBar2Echarts(bar2Options)
    },

    initLineEcharts(options) {
      const eChart = echarts.init(document.getElementById('line'))
      eChart.setOption(options)
    },

    initBar1Echarts(options) {
      const eChart = echarts.init(document.getElementById('bar1'))
      eChart.setOption(options)
    },

    initBar2Echarts(options) {
      const eChart = echarts.init(document.getElementById('bar2'))
      eChart.setOption(options)
    },

    changDatetime1(value) {
      const [startDate, endDate] = value
      const dates = this.getDatesInRange(startDate, endDate)
      const values = [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234]
      const options = this.getLineOptions(dates, values)
      this.initLineEcharts(options)
    },

    changDatetime2(value) {
      const [startDate, endDate] = value
      const dates = this.getDatesInRange(startDate, endDate)
      const values = [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234]
      const options = this.getBar1Options(dates, values)
      this.initBar1Echarts(options)
    },

    changDatetime3(value) {
      const [startDate, endDate] = value
      const dates = this.getDatesInRange(startDate, endDate)
      const values = [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234]
      const options = this.getBar2Options(dates, values)
      this.initBar2Echarts(options)
    },

    changDatetime4(value) {

    },

    getLineOptions(x, y) {
      return {
        color: this.color,
        dataZoom: [
          {
            show: x.length > 10,
            type: 'slider', // 使用滑动条形式的数据区域缩放
            zoomLock: true,
            startValue: 0, // 数据窗口范围的起始百分比
            endValue: 10, // 数据窗口范围的结束百分比
            height: 20
          }
        ],
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0 // 显示所有标签
          },
          data: x

        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            type: 'line',
            name: '累计用户',
            data: y

          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        }
      }
    },

    getBar1Options(x, y) {
      return {
        color: this.color,
        dataZoom: [
          {
            show: x.length > 10,
            type: 'slider', // 使用滑动条形式的数据区域缩放
            zoomLock: true,
            startValue: 0, // 数据窗口范围的起始百分比
            endValue: 10, // 数据窗口范围的结束百分比
            height: 20
          }
        ],
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0 // 显示所有标签
          },
          data: x

        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            type: 'bar',
            name: '新增用户',
            data: y

          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        }
      }
    },

    getBar2Options(x, y) {
      return {
        color: this.color,
        dataZoom: [
          {
            show: x.length > 7,
            type: 'slider', // 使用滑动条形式的数据区域缩放
            zoomLock: true,
            startValue: 0, // 数据窗口范围的起始百分比
            endValue: 7, // 数据窗口范围的结束百分比
            height: 20
          }
        ],
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0 // 显示所有标签
          },
          data: x

        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            type: 'bar',
            name: '推广考评',
            data: y

          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        }
      }
    },

    getDatesInRange(startDate, endDate) {
      const currentDate = new Date(startDate)
      const endDateTemp = new Date(endDate)
      const dates = []
      // eslint-disable-next-line no-unmodified-loop-condition
      while (currentDate <= endDateTemp) {
        dates.push(dayjs(currentDate).format('YYYY-MM-DD'))
        currentDate.setDate(currentDate.getDate() + 1)
      }
      return dates
    }

  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.data-container{
  display: flex;
  .data-search{
    display: flex;
    //justify-content: space-between;
  }
  .data-left{
    width: 70%;
  }
  .data-right{
    width: 30%
  }
  .data-select{
    margin-right: 30px;
  }
}

.data-item{
  margin-bottom: 20px;
  .data-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .title{
    font-weight: bold;
  }
  .data-box{
    height: 300px;
  }
}

.business-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 20px;
  .business-item{
    padding: 20px 25px;
    width: 22%;
    height: 140px;
    background: #FDFDFD;
    border-radius: 2px;
    border: 1px solid #EBEBEB;
    line-height: 30px;
    font-size: 15px;
    margin: 0 0 30px 0;
    .p1{
      color: $main-text;
    }
    .p2{
      color: $primary;
      .number{
        font-size: 30px;
        padding: 0 3px;
      }
    }
    .p3{
      color: $regular-text;
    }
  }
}
.el-data-picker{
  width: 240px;
}
.rank-box{
  margin-top: 20px;
  .rank-item{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .rank{
      width: 22px;
      height: 22px;
      line-height: 22px;
      text-align: center;
      &.on{
        background: #314659;
        border-radius: 50%;
        color: #fff;
      }
    }
    .dept{
      flex: 1;
      color: #303133;
      font-weight: bold;
      padding: 0 20px;
    }
  }
}

</style>
